<script setup>
import {isEmail, isPhone} from "@/utils/validate.js";
import {resetPassword, sendValidCode, verifyValidCode} from "@/api/user.js";

const emit = defineEmits(['change'])
const resetForm = ref({
  type: '2',
  account: 'hewu1122@163.com',
  code: ''
})

const resetRules = {
  type: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  account: [{ required: true,
    validator: (rule, value, callback) => {
      const type = resetForm.value.type;
      const mark = type === '1' ? '手机号码' :'邮箱地址'
      if(!value){
        callback(new Error(`请输入${mark}`))
      }
      if(type === '1' && ! isPhone(value)){
        callback(new Error('请输入正确的手机号码'))
      }
      if(type === '2' && ! isEmail(value)){
        callback(new Error('请输入正确邮箱地址'))
      }
      callback()
    },
    trigger: 'blur' }],
  code: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const resetFormRef = ref(null)

const countdown = ref(0)
let timer = null
// 按钮是否禁用
const disabled = computed(() => countdown.value > 0)
// 格式化按钮文本
const buttonText = computed(() =>
  countdown.value > 0 ? `${countdown.value} 秒后重发` : '获取验证码'
)
const onSendCode = async () => {
  await resetFormRef.value.validateField('account');
  await sendValidCode({
    account: resetForm.value.account,
    type: resetForm.value.type
  })
  // 启动倒计时
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

const onSubmit = async ()=>{
  await resetFormRef.value.validate();
  const { data } =  await verifyValidCode(resetForm.value);
  resetPwdForm.value.token = data;
  isType.value = 2;
}


// ========================================
const isType = ref(1);
const resetPwdForm = ref({
  password:'',
  agPassword:'',
  token:''
})

const resetPwdRules = {
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  agPassword: [{ required: true,
    validator: (rule, value, callback) => {
      if(value !== resetPwdForm.value.password){
        callback(new Error('两次密码不一致'))
      }
      callback()
    },
    trigger: 'blur' }],
}
const restPwdFormRef = ref(null)
const onSubmitReset = async ()=>{
  await restPwdFormRef.value.validate();
  await resetPassword({
    password:resetPwdForm.value.password,
    token:resetPwdForm.value.token
  })
  ElMessage.success('密码重置成功')
  emit('change','login')
}

</script>

<template>
  <el-card shadow="never" class="reset-form">
    <template v-if="isType===1">
      <div class="title">智慧云智能教育平台-找回密码</div>
      <el-form ref="resetFormRef" label-width="80px" :model="resetForm" :rules="resetRules" @keyup.enter.native="onSubmit()" >
      <el-form-item prop="type" label="找回方式">
        <el-select style="width: 100%" v-model="resetForm.type" placeholder="请选择">
          <el-option value="1"  label="手机"></el-option>
          <el-option value="2" label="邮箱"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="account"  label="账号信息">
        <el-input v-model="resetForm.account" :placeholder="resetForm.type === '1' ? '请输入手机号':'请输入邮箱地址'  "> </el-input>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <el-input v-model="resetForm.code" placeholder="请输入验证码">
          <template #append>
            <el-button @click="onSendCode" :disabled="disabled">{{ buttonText }}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即验证</el-button>
        <el-button type="warning" @click="emit('change','login')">返回登录</el-button>
      </el-form-item>
      <div class="flex justify-end">
        <span class="link mr-[20px]" @click="$router.push('/reg')">注册账号</span>
        <router-link  class="link" to="/">返回主页</router-link>
      </div>
    </el-form>
    </template>
    <template v-else>
      <div class="title">智慧云智能教育平台-找回密码</div>
      {{resetPwdForm}}
      <el-form ref="restPwdFormRef" label-width="80px" :model="resetPwdForm" :rules="resetPwdRules" @keyup.enter.native="onSubmitReset()">
        <el-form-item prop="password" label="新密码">
          <el-input v-model="resetPwdForm.password" clearable show-password  placeholder="请输入新密码"> </el-input>
        </el-form-item>
        <el-form-item prop="agPassword" label="确认密码">
          <el-input v-model="resetPwdForm.agPassword" clearable show-password placeholder="请再次输入新密码"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitReset">立即重置</el-button>
          <el-button type="warning" @click="emit('change','login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.reset-form{
  width: 480px;
  height: 380px;
  padding: 30px 20px 0;
  position: fixed;
  top: 20%;
  left: 60%;
  .title{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--el-color-primary);
  }
  .link{
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 14px;
  }
}
</style>
